$.ajax({
    type: "POST",
    url: "/api/getmood/getpl",
    data: {
        page: 1,
        limit: 4
    },
    success: (data) => {
        const obj = data.data.rows
        console.log(obj)
        $('.col-lg-8').prepend(`<div class="box"></div>`)
        for (let i = 0; i < obj.length; i++){
            $('.box').append(`
            <div class="post post-classic rounded bordered">
            <div class="thumb top-rounded">
                <a href="category.html" class="category-badge lg position-absolute">Lifestyle</a>
                <span class="post-format">
                    <i class="icon-picture"></i>
                </span>
                <a href="blog-single.html">
                    <div class="inner">
                        <img src="images/posts/post-lg-1.jpg" alt="post-title" />
                    </div>
                </a>
            </div>
            <div class="details">
                <ul class="meta list-inline mb-0">
                    <li class="list-inline-item"><a href="#"><img src="${obj[i].sculpture}" class="author" alt="author"/>${obj[i].name}</a></li>
                    <li class="list-inline-item">${obj[i].data.slice(0,10)}</li>
                    <li class="list-inline-item"><i class="icon-bubble"></i>(${obj[i].Pls.length})</li>
                </ul>
                <h5 class="post-title mb-3 mt-3"><a href="blog-single.html">心情说说${obj[i].id}</a></h5>
                <p class="excerpt mb-0">${obj[i].text}</p>
            </div>
            <div class="post-bottom clearfix d-flex align-items-center">
                <div class="social-share me-auto">
                    
                </div>
                <div class="float-end d-none d-md-block">
                    <a class="more-link">评论<i class="icon-arrow-down"></i></a>
                </div>
            </div>
            <div class="pl1" style="display:none">
                    <div id="plbox">
                    </div>
                    <textarea name="" id="" cols="30" rows="10" placeholder="请输入内容"></textarea>
                    <button>提交留言</button>
                    </div>
            </div>
            `)
        }
    }
})
//获取总页数
var sum=0
$.ajax({
    type: "GET",
    url: "/api/getmood/getall",
    success: (data) => {
        let yema = Math.ceil(data.data.length / 4)
        sum=yema
        for (let i = 1; i < yema; i++) {
            $("#fy").append(`
            <li class="page-item ym"><a class="page-link">${i+1}</a></li>
            `)
        }
        $("#fy").append(`
            <li class="page-item p-next" aria-current="page"><a class="page-link"><i class="icon-arrow-right"></i></a></li>
        `)
    }
})
//分页
$("#fy").off("mouseenter").on("mouseenter",()=>{
    $("#fy .ym").off("click").click(function(){
        $(".box").children(".post").remove()
        $(this).addClass("active").siblings().removeClass("active")
        $.ajax({
            type: "POST",
            url: "/api/getmood/getpl",
            data: {
                page:$(this).text(),
                limit: 4
            },
            success: (data) => {
                const obj = data.data.rows
                for (let i = 0; i < obj.length; i++){
                    $('.box').append(`
                    <div class="post post-classic rounded bordered">
                    <div class="thumb top-rounded">
                        <a href="category.html" class="category-badge lg position-absolute">Lifestyle</a>
                        <span class="post-format">
                            <i class="icon-picture"></i>
                        </span>
                        <a href="blog-single.html">
                            <div class="inner">
                                <img src="images/posts/post-lg-1.jpg" alt="post-title" />
                            </div>
                        </a>
                    </div>
                    <div class="details">
                        <ul class="meta list-inline mb-0">
                            <li class="list-inline-item"><a href="#"><img src="${obj[i].sculpture}" class="author" alt="author"/>${obj[i].name}</a></li>
                            <li class="list-inline-item">${obj[i].data.slice(0,10)}</li>
                            <li class="list-inline-item"><i class="icon-bubble"></i>(0)</li>
                        </ul>
                        <h5 class="post-title mb-3 mt-3"><a href="blog-single.html">心情说说${obj[i].id}</a></h5>
                        <p class="excerpt mb-0">${obj[i].text}</p>
                    </div>
                    <div class="post-bottom clearfix d-flex align-items-center">
                        <div class="social-share me-auto">
                        
                        </div>
                        <div class="float-end d-none d-md-block">
                            <a href="blog-single.html" class="more-link">Continue reading<i class="icon-arrow-right"></i></a>
                        </div>
                        <div class="pl1" style="display:none">
                        <div id="plbox">
                        </div>
                        <textarea name="" id="" cols="30" rows="10" placeholder="请输入内容"></textarea>
                        <button>提交留言</button>
                        </div>
                </div>
                    </div>
                </div>
                    `)
                }
            }
        })
    })
    $("#fy .p-prev").off("click").click(function(){
        const ym = Number($(this).siblings(".active").text()) 
        console.log(ym)
        if(ym==1){

        }else{
            $(".box").children(".post").remove()
            $(".ym").eq(ym-2).addClass("active").siblings().removeClass("active")
            $.ajax({
                type: "POST",
                url: "/api/getmood/getpl",
                data: {
                    page:(ym-1),
                    limit: 4
                },
                success: (data) => {
                    const obj = data.data.rows
                    for (let i = 0; i < obj.length; i++){
                        $('.box').append(`
                        <div class="post post-classic rounded bordered">
                        <div class="thumb top-rounded">
                            <a href="category.html" class="category-badge lg position-absolute">Lifestyle</a>
                            <span class="post-format">
                                <i class="icon-picture"></i>
                            </span>
                            <a href="blog-single.html">
                                <div class="inner">
                                    <img src="images/posts/post-lg-1.jpg" alt="post-title" />
                                </div>
                            </a>
                        </div>
                        <div class="details">
                            <ul class="meta list-inline mb-0">
                                <li class="list-inline-item"><a href="#"><img src="${obj[i].sculpture}" class="author" alt="author"/>${obj[i].name}</a></li>
                                <li class="list-inline-item">${obj[i].data.slice(0,10)}</li>
                                <li class="list-inline-item"><i class="icon-bubble"></i>(0)</li>
                            </ul>
                            <h5 class="post-title mb-3 mt-3"><a href="blog-single.html">心情说说${obj[i].id}</a></h5>
                            <p class="excerpt mb-0">${obj[i].text}</p>
                        </div>
                        <div class="post-bottom clearfix d-flex align-items-center">
                            <div class="social-share me-auto">
                            
                            </div>
                            <div class="float-end d-none d-md-block">
                                <a href="blog-single.html" class="more-link">Continue reading<i class="icon-arrow-right"></i></a>
                            </div>
                            <div class="pl1" style="display:none">
                            <div id="plbox">
                            </div>
                            <textarea name="" id="" cols="30" rows="10" placeholder="请输入内容"></textarea>
                            <button>提交留言</button>
                            </div>
                    </div>
                        </div>
                    </div>
                        `)
                    }
                }
            })
        }
    })
    $("#fy .p-next").off("click").click(function(){
        const ym = Number($(this).siblings(".active").text()) 
        if(ym==sum){

        }else{
            $(".ym").eq(ym).addClass("active").siblings().removeClass("active")
            $.ajax({
                type: "POST",
                url: "/api/getmood/getpl",
                data: {
                    page:(ym+1),
                    limit: 4
                },
                success: (data) => {
                    const obj = data.data.rows
                    $(".box").children(".post").remove()
                    for (let i = 0; i < obj.length; i++){
                        $('.box').append(`
                        <div class="post post-classic rounded bordered">
                        <div class="thumb top-rounded">
                            <a href="category.html" class="category-badge lg position-absolute">Lifestyle</a>
                            <span class="post-format">
                                <i class="icon-picture"></i>
                            </span>
                            <a href="blog-single.html">
                                <div class="inner">
                                    <img src="images/posts/post-lg-1.jpg" alt="post-title" />
                                </div>
                            </a>
                        </div>
                        <div class="details">
                            <ul class="meta list-inline mb-0">
                                <li class="list-inline-item"><a href="#"><img src="${obj[i].sculpture}" class="author" alt="author"/>${obj[i].name}</a></li>
                                <li class="list-inline-item">${obj[i].data.slice(0,10)}</li>
                                <li class="list-inline-item"><i class="icon-bubble"></i>(0)</li>
                            </ul>
                            <h5 class="post-title mb-3 mt-3"><a href="blog-single.html">心情说说${obj[i].id}</a></h5>
                            <p class="excerpt mb-0">${obj[i].text}</p>
                        </div>
                        <div class="post-bottom clearfix d-flex align-items-center">
                            <div class="social-share me-auto">
                            
                            </div>
                            <div class="float-end d-none d-md-block">
                                <a href="blog-single.html" class="more-link">Continue reading<i class="icon-arrow-right"></i></a>
                            </div>
                            <div class="pl1" style="display:none">
                            <div id="plbox">
                            </div>
                            <textarea name="" id="" cols="30" rows="10" placeholder="请输入内容"></textarea>
                            <button>提交留言</button>
                            </div>
                    </div>
                        </div>
                    </div>
                        `)
                    }
                }
            })
        }
    })
})
$("#go").on("click",function(){
    const ym = $("#sz").val()
    if(ym<=sum){
        $(".ym").eq(ym-1).addClass("active").siblings().removeClass("active")
        $.ajax({
            type: "POST",
            url: "/api/getmood/getpl",
            data: {
                page:ym,
                limit: 4
            },
            success: (data) => {
                const obj = data.data.rows
                for (let i = 0; i < obj.length; i++){
                    $('.box').append(`
                    <div class="post post-classic rounded bordered">
                    <div class="thumb top-rounded">
                        <a href="category.html" class="category-badge lg position-absolute">Lifestyle</a>
                        <span class="post-format">
                            <i class="icon-picture"></i>
                        </span>
                        <a href="blog-single.html">
                            <div class="inner">
                                <img src="images/posts/post-lg-1.jpg" alt="post-title" />
                            </div>
                        </a>
                    </div>
                    <div class="details">
                        <ul class="meta list-inline mb-0">
                            <li class="list-inline-item"><a href="#"><img src="${obj[i].sculpture}" class="author" alt="author"/>${obj[i].name}</a></li>
                            <li class="list-inline-item">${obj[i].data.slice(0,10)}</li>
                            <li class="list-inline-item"><i class="icon-bubble"></i>(0)</li>
                        </ul>
                        <h5 class="post-title mb-3 mt-3"><a href="blog-single.html">心情说说${obj[i].id}</a></h5>
                        <p class="excerpt mb-0">${obj[i].text}</p>
                    </div>
                    <div class="post-bottom clearfix d-flex align-items-center">
                        <div class="social-share me-auto">
                        
                        </div>
                        <div class="float-end d-none d-md-block">
                            <a href="blog-single.html" class="more-link">Continue reading<i class="icon-arrow-right"></i></a>
                        </div>
                        <div class="pl1" style="display:none">
                        <div id="plbox">
                        </div>
                        <textarea name="" id="" cols="30" rows="10" placeholder="请输入内容"></textarea>
                        <button>提交留言</button>
                        </div>
                </div>
                    </div>
                </div>
                    `)
                }
            }
        })
    }
})
//评论
$(".col-lg-8").off("mouseenter").on("mouseenter", () => {
    $(".float-end").off("click").click(function(){
        $(".pl1").slideToggle()
        let Mood = $(this).parent().prev().children('h5').children().text().slice(4)
        $.ajax({
            type: "POST",
            url: "/api/getpl/getmood",
            data: {
                MoodId: Mood
            },
            success:(data)=>{
                const obj = data.data.rows
                console.log(obj)
                if(obj.length>$(this).parent().next().find("ul").length){
                    for (let i = 0; i < obj.length; i++) {
                        $(this).parent().next().find("div").append(`
                            <ul>
                            <li>
                                <p>${obj[i].name}</p>
                                <span>${obj[i].text}</span>
                                <span style="float:right">${obj[i].data}</span>
                            </li>
                        </ul>
                        `)
                    }
                } 
            }
        })
    })
    $(".pl1 button").off("click").click(function(){
        const tx = $(this).prev().val()
        const myDate = new Date()
        const data = myDate.toLocaleString()
        const Mood = $(this).parent().prev().prev().children('h5').children().text().slice(4)
        console.log(Mood)
        $.ajax({
            type: "POST",
            url: "/api/getpl/pushpl",
            data: {
                text: tx,
                data: data,
                MoodId: Mood,
                name: vid||`游客`
            },
            success: (data) => {
                console.log(data)
                if (data.data) {
                    alert("留言成功")
                    window.location.reload()
                }
            }
        })
        
    })
})
